<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿推荐 - 社交心愿平台</title>
    
    <!-- 引入外部资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #818CF8;
            --secondary: #EC4899;
            --accent: #F59E0B;
            --success: #10B981;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #64748B;
            --light-gray: #E2E8F0;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow: 0 4px 16px rgba(0,0,0,0.12);
            --transition: all 0.3s ease;
            --radius: 12px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #F8FAFC;
            color: var(--dark);
            line-height: 1.6;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 页面标题样式 */
        .page-header {
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
            position: relative;
            display: inline-block;
        }
        
        .page-subtitle {
            font-size: 1rem;
            color: var(--gray);
            max-width: 800px;
        }
        
        /* 推荐标签样式 */
        .recommendation-tabs {
            display: flex;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            gap: 10px;
            scrollbar-width: thin;
        }
        
        .recommendation-tabs::-webkit-scrollbar {
            height: 4px;
        }
        
        .recommendation-tabs::-webkit-scrollbar-thumb {
            background-color: var(--primary-light);
            border-radius: 2px;
        }
        
        .tab-item {
            white-space: nowrap;
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 6px 18px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
        }
        
        .tab-item:hover, .tab-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 卡片容器样式 */
        .wish-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        /* 大卡片样式 */
        .featured-wish {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }
        
        .featured-wish:hover {
            box-shadow: var(--shadow);
        }
        
        .featured-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .featured-content {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
        }
        
        /* 许愿卡片基础样式 */
        .wish-card {
            background-color: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .wish-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }
        
        /* 图片容器样式 */
        .image-container {
            position: relative;
            overflow: hidden;
        }
        
        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .wish-card:hover .card-image {
            transform: scale(1.05);
        }
        
        /* 多图布局 */
        .multi-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            height: 100%;
        }
        
        .multi-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .multi-images.count-1 {
            grid-template-columns: 1fr;
        }
        
        .multi-images.count-3 {
            grid-template-rows: repeat(2, 1fr);
        }
        
        .multi-images.count-3 .multi-image:first-child {
            grid-column: span 2;
        }
        
        .multi-images.count-4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 图片数量指示器 */
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.75rem;
        }
        
        /* 内容样式 */
        .card-body {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .wish-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .type-popular {
            background-color: rgba(236, 72, 153, 0.1);
            color: var(--secondary);
        }
        
        .type-trending {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--accent);
        }
        
        .type-similar {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .type-new {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
        }
        
        .wish-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            transition: var(--transition);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wish-card:hover .wish-title {
            color: var(--primary);
        }
        
        .wish-content {
            color: var(--gray);
            font-size: 0.85rem;
            margin-bottom: 1rem;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.75rem;
        }
        
        .author-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.8rem;
        }
        
        /* 互动统计 */
        .wish-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: var(--gray);
            padding-top: 0.75rem;
            border-top: 1px dashed var(--light-gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 无图许愿样式 */
        .no-image-card {
            border: 1px solid var(--light-gray);
        }
        
        .no-image-body {
            padding: 1.25rem;
        }
        
        /* 推荐理由标签 */
        .recommendation-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--primary);
            color: white;
            border-radius: 4px;
            padding: 2px 8px;
            font-size: 0.7rem;
            font-weight: 600;
            z-index: 1;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .featured-wish {
                grid-template-columns: 1fr;
            }
            
            .wish-container {
                grid-template-columns: 1fr;
            }
            
            .page-title {
                font-size: 1.75rem;
            }
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .load-more:hover {
            background-color: var(--primary);
            color: white;
        }
    </style>
</head>
<body>
    <div class="container py-4 px-4">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">为你推荐的愿望</h1>
            <p class="page-subtitle">根据你的兴趣和浏览历史，发现更多精彩愿望</p>
            
            <!-- 推荐分类标签 -->
            <div class="recommendation-tabs">
                <div class="tab-item active">全部推荐</div>
                <div class="tab-item">热门愿望</div>
                <div class="tab-item">相似兴趣</div>
                <div class="tab-item">最新发布</div>
                <div class="tab-item">即将实现</div>
                <div class="tab-item">附近的愿望</div>
                <div class="tab-item">朋友的愿望</div>
            </div>
        </div>
        
        <!-- 愿望推荐容器 -->
        <div class="wish-container">
            <!-- 特色推荐 - 大图展示 -->
            <div class="featured-wish">
                <div class="image-container">
                    <img src="https://picsum.photos/800/600?random=1" alt="特色愿望：学习潜水探索海洋生物" class="featured-image">
                    <div class="recommendation-badge">编辑推荐</div>
                </div>
                <div class="featured-content">
                    <span class="wish-type type-popular">热门愿望</span>
                    <h3 class="wish-title">学习潜水，探索神秘的海洋世界，与海洋生物共游</h3>
                    <p class="wish-content">
                        一直对海洋充满好奇，希望能学会潜水，亲眼看看五彩斑斓的珊瑚礁和各种海洋生物。计划先考取OW潜水证，然后去菲律宾的薄荷岛或马来西亚的仙本那实现这个愿望。有没有同样爱好的朋友可以一起组队？
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=10" alt="海洋爱好者小海的头像" class="author-avatar">
                        <div class="author-name">海洋爱好者小海</div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>3.2k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>128 评论</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>567 点赞</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-bookmark"></i>
                            <span>234 收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 多图愿望1 -->
            <div class="wish-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-3">
                        <img src="https://picsum.photos/400/300?random=2" alt="手工皮具制作工具" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=3" alt="手工皮具作品展示" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=4" alt="手工皮具制作过程" class="multi-image">
                    </div>
                    <div class="image-count">3图</div>
                    <div class="recommendation-badge">相似兴趣</div>
                </div>
                <div class="card-body">
                    <span class="wish-type type-similar">手工艺</span>
                    <h3 class="wish-title">学习手工皮具制作，亲手制作一个钱包和背包</h3>
                    <p class="wish-content">
                        喜欢有温度的手工艺品，希望能学习手工皮具制作，从基础的缝制开始，最终能独立完成一个钱包和背包。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=11" alt="手作达人阿木的头像" class="author-avatar">
                        <div class="author-name">手作达人阿木</div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>876 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>123 点赞</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图愿望1 -->
            <div class="wish-card no-image-card">
                <div class="card-body no-image-body">
                    <div class="recommendation-badge">最新发布</div>
                    <span class="wish-type type-new">个人成长</span>
                    <h3 class="wish-title">30天内养成每天写日记的习惯，记录生活点滴</h3>
                    <p class="wish-content">
                        想通过写日记来反思自己的生活，记录美好的瞬间和成长的感悟。希望能坚持30天，养成这个好习惯。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=12" alt="生活记录者小林的头像" class="author-avatar">
                        <div class="author-name">生活记录者小林</div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>345 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>89 点赞</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 单图愿望1 -->
            <div class="wish-card">
                <div class="image-container" style="height: 180px;">
                    <img src="https://picsum.photos/400/300?random=5" alt="城市马拉松比赛照片" class="card-image">
                    <div class="recommendation-badge">热门愿望</div>
                </div>
                <div class="card-body">
                    <span class="wish-type type-popular">运动健康</span>
                    <h3 class="wish-title">参加一次全程马拉松比赛，挑战自我极限</h3>
                    <p class="wish-content">
                        从5公里都跑不完到完成全程马拉松，这是我今年的目标。目前正在进行系统训练，希望能顺利完赛。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=13" alt="跑步爱好者阿强的头像" class="author-avatar">
                        <div class="author-name">跑步爱好者阿强</div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>2.1k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>345 点赞</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 多图愿望2 -->
            <div class="wish-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-4">
                        <img src="https://picsum.photos/400/300?random=6" alt="园艺工具展示" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=7" alt="阳台花园一角" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=8" alt="种植的蔬菜" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=9" alt="盛开的花朵" class="multi-image">
                    </div>
                    <div class="image-count">4图</div>
                    <div class="recommendation-badge">相似兴趣</div>
                </div>
                <div class="card-body">
                    <span class="wish-type type-similar">生活美学</span>
                    <h3 class="wish-title">打造一个属于自己的阳台花园，种植花草和蔬菜</h3>
                    <p class="wish-content">
                        希望把光秃秃的阳台改造成一个充满生机的小花园，种上喜欢的花草和一些简单的蔬菜，享受种植的乐趣。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=14" alt="园艺爱好者小园的头像" class="author-avatar">
                        <div class="author-name">园艺爱好者小园</div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>1.5k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>234 点赞</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图愿望2 -->
            <div class="wish-card no-image-card">
                <div class="card-body no-image-body">
                    <div class="recommendation-badge">朋友的愿望</div>
                    <span class="wish-type type-new">知识学习</span>
                    <h3 class="wish-title">3个月内掌握Python基础编程，完成一个小项目</h3>
                    <p class="wish-content">
                        想学习编程很久了，这次下定决心要在3个月内掌握Python基础知识，并尝试制作一个简单的数据分析小项目。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=15" alt="学习者小张的头像" class="author-avatar">
                        <div class="author-name">学习者小张</div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>678 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>156 点赞</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 双图愿望 -->
            <div class="wish-card">
                <div class="image-container" style="height: 180px;">
                    <div class="multi-images count-2">
                        <img src="https://picsum.photos/400/300?random=16" alt="露营装备展示" class="multi-image">
                        <img src="https://picsum.photos/400/300?random=17" alt="山间露营夜景" class="multi-image">
                    </div>
                    <div class="image-count">2图</div>
                    <div class="recommendation-badge">热门愿望</div>
                </div>
                <div class="card-body">
                    <span class="wish-type type-trending">户外体验</span>
                    <h3 class="wish-title">完成一次山林露营，看星空和日出</h3>
                    <p class="wish-content">
                        想暂时逃离城市的喧嚣，去山林里露营一次，晚上看满天繁星，清晨看日出云海，体验大自然的美好。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=16" alt="户外爱好者小峰的头像" class="author-avatar">
                        <div class="author-name">户外爱好者小峰</div>
                    </div>
                    
                    <div class="wish-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>2.3k 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>456 点赞</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">
            <i class="fas fa-refresh"></i> 加载更多推荐
        </button>
    </div>

    <script>
        // 标签切换功能
        document.querySelectorAll('.tab-item').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.tab-item').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 这里可以添加筛选不同推荐类型的逻辑
                const tabName = this.textContent;
                showToast(`已切换到 "${tabName}"`);
            });
        });
        
        // 卡片点击事件
        document.querySelectorAll('.wish-card, .featured-wish').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.wish-title').textContent;
                showToast(`查看愿望详情: ${title}`);
                // 实际应用中这里会跳转到详情页
                // window.location.href = 'wish-detail.html';
            });
        });
        
        // 加载更多按钮
        document.querySelector('.load-more').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-refresh"></i> 加载更多推荐';
                showToast('已加载最新推荐');
            }, 1500);
        });
        
       
    </script>
</body>
</html>

